<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css"
			href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
        <script type="text/javascript"
			src="../../scripts/form/FileUploadField.js"></script>
        <script type="text/javascript" src="../../scripts/grid/GroupSummary.js">
        </script>
		<script type="text/javascript" src="../../scripts/grid/RowExpander.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
        <script type="text/javascript" src="../../scripts/imageViewer.js"></script>
        <script type="text/javascript">
        	var orderMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.order');
        	var dzColorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessoryOthers');
            var pantoneMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			var yarnMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.yarn');
			var customerMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
			var fMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.factory');
			var fcMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.francecustomer');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var colorMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.pantonecolor');
			var aoMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accessoryothers');
			
			var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
			
			var accessoryOthersId = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
									
			var inoutForm;
			var inoutStore;
            var inoutGrid;
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/StockServlet?action=43&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                inoutStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var editCallback = function(){
				inoutForm.getForm().load({
					url:'../../servlet/StockServlet?action=44&id=' + editId + '&' + (new Date()).getTime(), 
					waitMsg:Ext.LoadMask.prototype.msg, 
					success: function(form, action){
						Ext.getCmp('accessoryOthersId').setValue(accessoryOthersId);
					},
					failure: function(o){
						messageTip.msg(message.get('message.tip'), message.get('message.load.unsuccessful'));
					}
				});
			}
			
			var accessoryOthersXMLReader = new Ext.data.XmlReader({
	                record: 'item'
			            }, [{
		                    name: 'id',
		                    mapping: 'id'
		                }, {
		                    name: 'photo1Name',
		                    mapping: 'photo1Name'
		                }, {
		                    name: 'photo2Name',
		                    mapping: 'photo2Name'
		                }, {
		                    name: 'applicationReference',
		                    mapping: 'applicationReference'
		                }, {
		                    name: 'referenceIndex1',
		                    mapping: 'referenceIndex1'
		                }, {
		                    name: 'accessoryReference',
		                    mapping: 'accessoryReference'
		                }, {
		                    name: 'referenceIndex2',
		                    mapping: 'referenceIndex2'
		                }, {
		                    name: 'ctAccessoryType',
		                    mapping: 'ctAccessoryType'
		                }, {
		                    name: 'ctApplicationType',
		                    mapping: 'ctApplicationType'
		                }, {
		                    name: 'ctMaterialType',
		                    mapping: 'ctMaterialType'
		                }, {
		                    name: 'ctSupplyType',
		                    mapping: 'ctSupplyType'
		                }, {
		                    name: 'ctUnit',
		                    mapping: 'ctUnit'
		                },{
		                    name: 'isApplication',
		                    mapping: 'isApplication'
		                }, {
		                    name: 'customerReference',
		                    mapping: 'customerReference'
		                }, {
		                    name: 'customerColor',
		                    mapping: 'customerColor'
		                }, {
		                    name: 'factoryReference',
		                    mapping: 'factoryReference'
		                }, {
		                    name: 'factoryColor',
		                    mapping: 'factoryColor'
		                }, {
		                    name: 'customerId',
		                    mapping: 'customerId'
		                }, {
		                    name: 'customerName',
		                    mapping: 'customerName'
		                }, {
		                    name: 'customerDepartment',
		                    mapping: 'customerDepartment'
		                }, {
		                    name: 'factoryId',
		                    mapping: 'factoryId'
		                }, {
		                    name: 'factoryNameCN',
		                    mapping: 'factoryNameCN'
		                }, {
		                    name: 'factoryNameEN',
		                    mapping: 'factoryNameEN'
		                }, {
		                    name: 'ctCareLabelMaterial1',
		                    mapping: 'ctCareLabelMaterial1'
		                }, {
		                    name: 'percentage1',
		                    mapping: 'percentage1'
		                }, {
		                    name: 'ctCareLabelMaterial2',
		                    mapping: 'ctCareLabelMaterial2'
		                }, {
		                    name: 'percentage2',
		                    mapping: 'percentage2'
		                }, {
		                    name: 'ctCareLabelMaterial3',
		                    mapping: 'ctCareLabelMaterial3'
		                }, {
		                    name: 'percentage3',
		                    mapping: 'percentage3'
		                }, {
		                    name: 'ctCareLabelMaterial4',
		                    mapping: 'ctCareLabelMaterial4'
		                }, {
		                    name: 'percentage4',
		                    mapping: 'percentage4'
		                }, {
		                    name: 'ctCareLabelMaterial5',
		                    mapping: 'ctCareLabelMaterial5'
		                }, {
		                    name: 'percentage5',
		                    mapping: 'percentage5'
		                }, {
		                    name: 'descriptionFR',
		                    mapping: 'descriptionFR'
		                }, {
		                    name: 'descriptionCN',
		                    mapping: 'descriptionCN'
		                }, {
		                    name: 'descriptionEN',
		                    mapping: 'descriptionEN'
		                }]);
			
			var accessoryOthersXmlLoader = new xmlLoader('../../servlet/BiAccessoryOthersServlet?action=11&id=' + accessoryOthersId);
			var accessoryOthersRecord = accessoryOthersXMLReader.readRecords(accessoryOthersXmlLoader.getXml()).records[0];
			var itemTplMarkup = [
						'<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td style="background:#eeeeee; width: 10%;">',
							aoMessage.get('ui.accessoryothers.isapplication'),
							'</td><td>{isApplication}</td>',
							'<td style="background:#eeeeee;width: 10%;">',
							message.get('message.edit.buyer'),
							'</td><td>{ctSupplyType}</td>',
							'<td style="background:#eeeeee;width: 10%;">',
							aoMessage.get('ui.accessoryothers.reference'),
							'</td><td>{applicationReference}{accessoryReference}</td>',
							'<td style="background:#eeeeee;width: 10%;">',
							aoMessage.get('ui.accessoryothers.type') + '(' + aoMessage.get('ui.accessoryothers.application')+')',
							'</td><td>{ctAccessoryType}{ctApplicationType}</td></tr>',
							
							'<tr>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.unit'),
							'</td><td>{ctUnit}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.materialtype'),
							'</td><td>{ctMaterialType}</td>',
							'<td style="background:#eeeeee;">',
							'</td><td></td>',
							'<td style="background:#eeeeee;">',
							'</td><td></td></tr>',

							'<tr><td style="background:#eeeeee; ">',
							message.get('message.edit.customername'),
							'</td><td>{customerName}</td>',
							'<td style="background:#eeeeee;">',
							fcMessage.get('ui.francecustomer.department'),
							'</td><td>{customerDepartment}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.customerreference'),
							'</td><td>{customerReference}</td>',
							'<td style="background:#eeeeee;">',
							colorMessage.get('ui.pantonecolor.customercolor'),
							'</td><td>{customerColor}</td></tr>',

							'<tr><td style="background:#eeeeee; ">',
							fMessage.get('ui.factory.name'),
							'</td><td>{factoryNameCN}</td>',
							'<td colspan="2">{factoryNameEN}</td>',
							'<td style="background:#eeeeee;">',
							message.get('message.edit.factoryreference'),
							'</td><td>{factoryReference}</td>',
							'<td style="background:#eeeeee;">',
							colorMessage.get('ui.pantonecolor.factorycolor'),
							'</td><td>{factoryColor}</td></tr>',
							
														
							'<tr><td style="background:#eeeeee;">',
							orderMessage.get('ui.measurespecification.photo'),
							'</td><td colspan="7"><img height="150" src="../../_temp/{photo1Name}" onclick="openImageViewer(this.src);"/>&nbsp;&nbsp;&nbsp;&nbsp;<img height="150" src="../../_temp/{photo2Name}" onclick="openImageViewer(this.src);"/></td></tr>',
						'</tbody></table>'
			];
			
            var itemTpl = new Ext.Template(itemTplMarkup);
			
			Ext.onReady(function(){
				itemTpl.append('accessoryOthers', accessoryOthersRecord.data);
				
				Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var inoutXMLReader = new Ext.data.XmlReader({
		                record: 'item'
		            }, [{
		                name: 'id',
		                mapping: 'id'
		            },{
						name: 'inoutDate',
						mapping: 'inoutDate'
					}, {
		                name: 'quantity',
		                mapping: 'quantity'
		            }, {
		                name: 'descriptionCn',
		                mapping: 'descriptionCn'
		            }, {
		                name: 'descriptionFr',
		                mapping: 'descriptionFr'
		            }, {
		                name: 'descriptionEn',
		                mapping: 'descriptionEn'
		            }]);
		            
		        inoutForm = new Ext.FormPanel({
			        labelAlign: 'left',
					url: '../../servlet/StockServlet?action=41',
			        frame:true,
			        title: message.get('message.edit.adjuststock'),
			        bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width: '100%',
					labelWidth: 125,
					reader: inoutXMLReader,
					collapsible: true,
			        items: [{
	                        id: 'accessoryOthersId',
	                        name: 'accessoryOthersId',
	                        xtype: 'hidden',
							value: accessoryOthersId
                    	},{
	                        id: 'id',
	                        name: 'id',
	                        xtype: 'hidden'
                    	},{
							layout: 'column',
							items: [{
								columnWidth:.33,
				                layout: 'form',
								items: [{
                                    name: 'inoutDate',
                                    fieldLabel: message.get('message.edit.date') + "(d/m/Y)",
                                    xtype: 'datefield',
                                    anchor: '60%',
                                    allowBlank: false,
                                    blankText: message.get('message.edit.noblank')
                             }]
							},{
								columnWidth:.33,
				                layout: 'form',
								items: [{
									xtype:'numberfield',
				                    fieldLabel: message.get('message.edit.quantity'),
				                    name: 'quantity',
				                    anchor:'90%',
									allowBlank: false,
									decimalPrecision: 0,
                        			blankText: message.get('message.edit.noblank'),
									maxLength: 64,
									tabIndex: 1
								}]
							}]
                    	},{
                            layout: 'column',
                            items: [{
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
                                    fieldLabel: message.get('message.edit.descriptionfr'),
                                    name: 'descriptionFr',
                                    xtype: 'textarea',
                                    maxLength: 2048,
                                    width: '90%',
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
                                    fieldLabel: message.get('message.edit.descriptioncn'),
                                    name: 'descriptionCn',
                                    xtype: 'textarea',
                                    maxLength: 2048,
                                    width: '90%',
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }, {
                                columnWidth: .33,
                                layout: 'form',
                                items: [{
                                    fieldLabel: message.get('message.edit.descriptionen'),
                                    name: 'descriptionEn',
                                    xtype: 'textarea',
                                    maxLength: 2048,
                                    width: '90%',
                                    maxLengthText: message.get('message.edit.toolong')
                                }]
                            }]
                        }],
			
			        buttons: [{
			            text: message.get('message.edit.save'),
						handler: function(){
                            if (inoutForm.getForm().isValid()) {
                                inoutForm.getForm().submit({
                                    method: 'post',
                                    success: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
                                        inoutForm.getForm().reset();
										inoutStore.load();
                                    },
                                    failure: function(form, action){
                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
                                    }
                                });
                            }
                        }
			        },{
						text: message.get('message.edit.reset'),
						handler: function(){
							inoutForm.getForm().reset();
						}
					},{
			            text: message.get('message.edit.cancel'),
                        handler: function(){
                            if (startPage != null) {
                                window.location = 'accessory_others_stock_list.html?startPage=' + startPage;
                            }else {
                                window.location = 'accessory_others_stock_list.html';
                            }
                        }
			        }]
			    });
				
				inoutForm.render('othersInout');
				
				inoutStore = new Ext.data.Store({
                    url: '../../servlet/StockServlet?action=42&id=' + accessoryOthersId,
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, ['index', 'id', 'inoutDate','descriptionCn','descriptionFr','descriptionEn',
						{
							name: 'quantity',
							type: 'float'
						}]),
                    
                    sortInfo: {
                        field: 'inoutDate',
                        direction: "DESC"
                    }
                });
                
                var expander = new Ext.grid.RowExpander({
			        tpl : new Ext.XTemplate(
		        		'<br/><p><b>' + message.get('message.edit.descriptionfr') + ':</b> {descriptionFr}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptioncn') + ':</b> {descriptionCn}</p><br/>',
						'<br/><p><b>' + message.get('message.edit.descriptionen') + ':</b> {descriptionEn}</p><br/>'
			        )
			    });
			    
                inoutGrid = new Ext.grid.GridPanel({
                    title: message.get('message.edit.adjuststock'),
                    store: inoutStore,
                    stripeRows: true,
                    height: 360,
                    columns: [expander, {
                        header: message.get('message.list.id'),
                        width: 20,
                        dataIndex: 'index',
                        sortable: false
                    }, {
                        id: 'inoutDate',
                        header: message.get('message.edit.date') + "(d/m/Y)",
                        sortable: true,
                        width: 20,
                        dataIndex: 'inoutDate'
                    },{
                        header: message.get('message.edit.quantity'),
						id: 'quantity',
                        dataIndex: 'quantity',
						align: 'right',
                        sortable: true
                    },{
                        header: message.get('message.list.eidt'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
						groupable: false,
                        renderer: renderEdit
                    },{
                        header: message.get('message.list.delete'),
                        width: 30,
                        dataIndex: 'id',
                        sortable: false,
                        renderer: renderDelete
                    }],
                    viewConfig: {
                        forceFit: true
                    },
                    loadMask: true,
                    plugins: [expander],
                    renderTo: 'othersInoutList'
                });
                
                inoutStore.load();
                
                function renderEdit(value, p, record){
                    return String.format('<a href="javascript: editItem(editCallback, {0});"><img src="../../images/icons/pencil.png" title="Edition" /></a>', record.id);
                }
                
                function renderDelete(value, p, record){
                    return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="Supprimer"/></a>', record.id);
                }
                
                
			});
        
        </script>
    </head>
    <body>
       <div id="accessoryOthers">
				
		</div>
		<div id="othersInout">
				
		</div>
		<div id="othersInoutList">
			
		</div>
    </body>
</html>
